<template>
	<view>
		<div class="navbar">
			<div class="avatar" @click="toMine()">
				<img :src="avatarImg" v-show="isLogin">
				<p v-show="!isLogin">未登录</p>
			</div>
			<div class="search">
				<input type="text" v-model="searchContent">
			</div>
			<icon class="iconSearch" type="search"></icon>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchContent:"请输入搜索内容",	
			};
		},
		methods:{
			toMine(){
				uni.switchTab({
				    url: '/pages/mine/index'
				});
			}
		},
		props:['isLogin','avatarImg']
	}
</script>

<style lang="scss" scped>
	.avatar{
		width:35px;
		height:35px;
		background-color: #cacaca;
		border-radius:35px;
		margin-top:7.5px;
		>img{
			width:100%;
			height:100%;
			border-radius:100%;
		}
		>p{
			font-size:10px;
			color:white;
			line-height: 35px;
			text-align: center;
		}
	}
	.navbar{
		width:100%;
		height:50px;
		display:flex;
		flex-direction: row;
		justify-content: space-around;
		
		background-color: #ffffff;
		>.search{
			width:200px;
			height:30px;
			margin-top:10px;
			border-radius:20px;
			background-color: #dddddd;
			>input{
				width:150px;
				height:20px;
				margin-top:5px;
				margin-left:10px;
				font-size:14px;
			}
		}
		>.iconSearch{
			font-size:15px;
			margin-top:15px;
		}
	}
</style>
